<template>
	<div class="flo_body">
		<template v-for="(value, key) of userLabelArr" :key="key">
			<singleTag :index="key" :text="value" :style="setNormalStyle" :defaultActive="rePre.defaultLabel" :changDefaultLabel="changDefaultLabel"></singleTag>
		</template>
	</div>
</template>

<script setup>
import { reactive, onMounted } from 'vue';
import singleTag from './singleTag.vue';
import { useStore } from 'vuex';

const store = useStore();

let history_prop = reactive({ his_tag: [] });

let rePre = reactive({ defaultLabel: store.state.user_reload_id, currentTag: '' });

let userLabelArr = { '#6635': '图片', '#6636': '书法', '#77452': '音樂', '#43321': '繪畫' };
let setNormalStyle = 'background-color:#09d010';

onMounted(() => {
	changDefaultLabel(rePre.defaultLabel);
});

function changDefaultLabel(a) {
	let his_Tag = history_prop.his_tag;

	let computid = '';

	if (his_Tag.length == 0) {
		computid = rePre.defaultLabel;
		changeEleActive();
	} else {
		computid = his_Tag[his_Tag.length - 1];
		if (computid == a) {
			undefined;
		} else {
			changeEleActive();
		}
	}

	function changeEleActive() {
		let lastEle = document.getElementById(`label_${computid}`);
		his_Tag.push(a);
		lastEle.classList.remove('activeLabel');

		let currentEle = document.getElementById(`label_${a}`);
		rePre.currentTag = a;
		currentEle.classList.add('activeLabel');
		store.commit('reloadContentID', a);
		// console.log(his_Tag);
		// if(his_Tag.length>100){
		// 	his_Tag=[]
		// }
	}
}
</script>

<style scoped lang="scss">
.flo_body {
	display: flex;
	justify-content: space-evenly;
	max-width: 600px;
}
.activeLabel {
	// background-color: #eed035;
	background-color: #eed035 !important;
}
</style>
